<template>
	<view class="page w-full h-100vh bg-fffbf4 flex flex-col align-items-center overflow-hidden">
		<view class="navBar w-full pl-30 pt-40 z-9999">
			<view class="title text-581403 f-40 text-bold flex justify-center align-items-center">
				线上纪念
				<image src="@/static/icon-16.png" class="back-icon" @click="$goBack()"></image>
			</view>
		</view>

		<view class="page-top-bg w-full h-750 z-0" :style="{'--bg': `url(${userStore.tenantInfo.incenseImage})`}"></view>

		<image src="/src/static/bg-15.png" class="action-icon" @click="show1 = true" v-if="noMemorialize"></image>
		<view class="gif" v-else></view>

		<view class="w-610 m-auto flex flex-col absolute" style="bottom: 80rpx;"
			v-if="JSON.stringify(memorializeData) !=='{}'">
			<text class="text-592E22 text-600 f-32">{{ memorializeData.location }}{{ memorializeData.name }}</text>
			<text class="text-93776F f-24 mt-10 ellipsis-multi-2">许愿：{{ memorializeData.remarks }}</text>
		</view>

		<view class="box flex flex-col align-items-center" @click="openShow2()">
			<view class="flex justify-center align-items-center dd">
				<image src="/src/static/icon-13.png"></image>
			</view>
			<text class="text-555 f-24 mt-10">最近纪念</text>
		</view>

		<wd-popup v-model="show1" closable safe-area-inset-bottom position="bottom"
			custom-style="border-radius:32rpx 32rpx 0 0;padding:30rpx;" @close="">
			<wd-form ref="form" size="large" :model="formData">
				<wd-cell-group border>
					<wd-input label="姓名" label-width="100px" prop="name" clearable v-model="formData.name" placeholder="姓名"
						:rules="[{ required: true, message: '姓名' }]" />
					<wd-input label="籍贯" label-width="100px" prop="location" clearable v-model="formData.location"
						placeholder="籍贯" :rules="[{ required: true, message: '籍贯' }]" />
					<wd-textarea label="许愿" label-width="100px" prop="remarks" clearable auto-height :maxlength="100"
						v-model="formData.remarks" placeholder="许愿" />
				</wd-cell-group>
				<view class="w-full mt-30">
					<wd-button type="primary" size="large" @click="handleSubmit" block>提交</wd-button>
				</view>
			</wd-form>
		</wd-popup>

		<wd-popup v-model="show2" closable safe-area-inset-bottom position="bottom"
			custom-style="border-radius:32rpx 32rpx 0 0;padding:30rpx;height:60vh;" @close="">
			<view class="w-full flex-center pt-10 pb-30 f-32">最近纪念</view>
			<view class="list-item flex justif-between align-items-center p-40" v-for="(item,index) in incenseOfferingList"
				:key="index" v-if="incenseOfferingList.length">
				<view class="w-full flex flex-col">
					<text class="text-592E22 text-600 f-32">{{ item.location }}{{ item.name }}</text>
					<text class="text-93776F f-24 mt-10 ellipsis-multi-2">许愿：{{ item.remarks }}</text>
					<view class="w-full text-right mt-12 text-93776F f-24">
						{{ dayjs(item.offeringTime).format('YYYY-MM-DD') }}
					</view>
				</view>
			</view>
			<view class="h-full flex-center text-999" v-else>暂无数据~</view>
		</wd-popup>

	</view>
</template>

<script setup>
	import dayjs from 'dayjs';
	import { useUserStore } from "@/store/user";
	import { onLoad } from '@dcloudio/uni-app';

	const { api_post_incenseOffering, api_get_incenseOfferingPage } = useRequest();

	const { proxy } = getCurrentInstance();
	const userStore = useUserStore()

	const noMemorialize = ref(true)
	if (getStorageWithExpiry("noMemorialize") !== null) {
		noMemorialize.value = getStorageWithExpiry("noMemorialize")
	}

	const show1 = ref(false)
	const show2 = ref(false)
	const form = ref(null)
	const formData = reactive({
		name: '',
		location: '',
		remarks: '',
		offeringTime: ''
	})
	const handleSubmit = () => {
		form.value
			.validate()
			.then(({
				valid,
				errors
			}) => {
				if (valid) {
					show1.value = false
					formData.tenantId = userStore.tenantId
					formData.offeringTime = dayjs().toISOString()
					api_post_incenseOffering(formData).then(res => {
						uni.showToast({
							icon: 'none',
							title: '上香成功'
						})
						openShow2()
						noMemorialize.value = false
						setStorageWithExpiry('noMemorialize', false)
						memorializeData.value = { ...formData }
						localStorage.setItem('memorializeData', JSON.stringify(formData))
					})
				}
			})
			.catch((error) => {
				console.log(error, 'error')
			})
	}

	// 设置缓存，有效期1天
	function setStorageWithExpiry(key, value) {
		const now = new Date().getTime(); // 当前时间戳
		const expiry = now + 24 * 60 * 60 * 1000; // 1天后的时间戳（毫秒）
		const item = {
			value: value, // 实际存储的值
			expiry: expiry, // 过期时间戳
		};
		uni.setStorageSync(key, JSON.stringify(item)); // 转为字符串存储
	}

	// 读取缓存，若过期则返回 null
	function getStorageWithExpiry(key) {
		const itemStr = uni.getStorageSync(key);
		if (!itemStr) return null; // 不存在直接返回

		const item = JSON.parse(itemStr);
		const now = new Date().getTime();
		if (now > item.expiry) {
			uni.removeStorageSync(key); // 已过期，清除缓存
			return null;
		}
		return item.value; // 返回有效值
	}

	const incenseOfferingList = ref([])
	const memorializeData = ref({})
	const openShow2 = () => {
		api_get_incenseOfferingPage({ page: 0, size: 30 }).then(res => {
			incenseOfferingList.value = res.content
			show2.value = true
		})

	}
	onLoad(() => {
		if (localStorage.getItem('memorializeData')) {
			memorializeData.value = JSON.parse(localStorage.getItem('memorializeData'))
		}
		console.log('memorializeData==', memorializeData.value)
	})
</script>

<style lang="scss" scoped>
	.page {
		background-image: url('/src/static/bg-12.png');
		background-size: 100% 100%;
	}

	.page-top-bg {
		width: 750rpx;
		height: 744rpx;
		background-image: var(--bg);
		background-size: 100% 100%;
	}

	.gif {
		width: 500rpx;
		height: 500rpx;
		background-image: url('@/static/gif-01.gif');
		background-size: 100% 100%;
		position: absolute;
		bottom: 20vh;
	}

	.action-icon {
		width: 240rpx;
		height: 240rpx;
		position: fixed;
		bottom: 300rpx;
		left: calc(50% - 120rpx);
	}


	.box {
		position: fixed;
		bottom: 200rpx;
		right: 20rpx;

		.dd {
			width: 96rpx;
			height: 96rpx;
			background-color: #c6c6c6;
			border-radius: 50%;

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}

	.list-item {
		width: 690rpx;
		height: 210rpx;
		background-image: url('@/static/bg-21.png');
		background-size: 100% 100%;
	}
</style>